<html>
  <head>
    <title>Dorling Cartogram</title>
    <script type="text/javascript" src="../../protovis.js"></script>
    <style type="text/css">

body {
  margin: 0;
}

    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">

var i = 0,
    w = window.innerWidth,
    h = window.innerHeight,
    nodes = pv.range(40).map(function(i) {
      var x = w * (.5 + Math.random()) / 2,
          y = h * (.5 + Math.random()) / 2,
          r = 4 + Math.random() * 80;
      return {x: x, y: y, p: {x: x, y: y}, r: r};
    });

var sim = pv.simulation(nodes)
    .constraint(pv.Constraint.collision(function(d) d.r))
    .constraint(pv.Constraint.position(function(d) d.p))
    .force(pv.Force.drag());

var vis = new pv.Panel()
    .width(w)
    .height(h)
    .event("mousedown", pv.Behavior.pan())
    .event("mousewheel", pv.Behavior.zoom())
    .fillStyle("white");

vis.add(pv.Dot)
    .data(nodes)
    .left(function(d) d.p.x)
    .top(function(d) d.p.y)
    .fillStyle("brown")
    .strokeStyle(null);

vis.add(pv.Panel)
    .data(nodes)
  .add(pv.Line)
    .data(function(d) [d, d.p])
    .left(function(d) d.x)
    .top(function(d) d.y)
    .strokeStyle("brown");

vis.add(pv.Dot)
    .data(nodes)
    .left(function(d) d.x)
    .top(function(d) d.y)
    .radius(function(d) d.r)
    .fillStyle(pv.color("steelblue").alpha(.8))
    .strokeStyle("black");

var timer = setInterval(function() {
    if (i++ > 100) clearInterval(timer);
    sim.step();
    sim.constraints.alpha(Math.pow(.9, i + 10) + .01);
    vis.render();
  }, 42);

    </script>
  </body>
</html>
